<template>
    <el-aside :width="menuWidth" class="aside">
        <h1>{{ title }}</h1>
        <el-menu :collapse=collapse class="menu" @select="onSelect" background-color="#263238" text-color="#8a979e"
            active-text-color="#e8eaec">
            <el-menu-item index="home">
                <svg-icon icon-class="icon-main" className="icon"></svg-icon>
                <span slot="title">主页</span>
            </el-menu-item>
            <el-submenu :index="item.code" v-for="item in menuList" :key="item.id">
                <!-- {{ menuList }} -->
                <template slot="title">
                    <svg-icon :icon-class="'icon-' + item.icon" className="icon"></svg-icon>
                    <span>{{ item.name }}</span>
                </template>
                <el-menu-item :index="item1.url" v-for="item1 in item.subMenus" :key="item1.id">
                    <svg-icon :icon-class="'icon-' + item1.icon" className="icon"></svg-icon>
                    <span>{{ item1.name }}</span>
                </el-menu-item>
            </el-submenu>
        </el-menu>
    </el-aside>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
    name: 'aside-page',
    /**
    * 定义组件的data函数，用于声明组件内部的状态。
    * 
    * @returns {Object} 返回一个对象，其中包含组件内部的状态。这些状态将在组件的生命周期内被管理和使用。
    */
    data() {
        return {
            menuList: [],
        }
    },
    created() {
        this.menuList = JSON.parse(sessionStorage.getItem('menuList') || [])
    },
    watch: {
        $route: {
            handler() {

            // handler(newValue) {
                // console.log('advawefqwefqwe', newValue);
                // let title = (newValue.meta.parentName ? newValue.meta.parentName + "-" : '') + newValue.meta.title
                // this.$store.commit('changeRouterTitle', title)
                // console.log('变化了路由');
                // let obj = Object.assign({
                //     path: newValue.path,
                //     name: newValue.name,
                // }, newValue.meta)
                // this.addtabList(obj)
            },
            immediate: true,
        }
    },
    methods: {
        onSelect(index) {
            // console.log('afae', index, this.$md5(indexPath));
            this.$router.push({
                name: index.replace('/', '-')
            })
        }
    },
    computed: {
        ...mapState(['collapse']),
        ...mapGetters(['menuWidth', 'title']),
    }
}
</script>

<style scoped lang="less">
.aside {
    transition: all linear .3s;

    .icon {
        margin-right: 10px;
    }

    background: #263238;

    &::-webkit-scrollbar {
        width: 0;
    }

    h1 {
        height: 50px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        background: var(--m-c);
        font-size: 20px;
        position: sticky;
        top: 0;
        z-index: 999;
    }

    .menu {
        border: none;

        /deep/ .el-menu-item {
            background-color: #202b30 !important;

            &.is-active {
                background-color: #2b373d !important;
            }

            &:hover {
                color: #e8eaec !important;
                background-color: #2b373d !important;
            }
        }


    }

}
</style>